<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Drop down content examples</title>
  </head>

<body>
    <form>
        <p>
          <label for="simple">A simple select box:</label>
          <select id="simple" name="simple">
            <option>Banana</option>
            <option>Cherry</option>
            <option>Lemon</option>
          </select>
        </p>
        <p>
            <label for="groups">Select box with option groups:</label>
            <select id="groups" name="groups">
            <optgroup label="fruits">
              <option>Banana</option>
              <option selected>Cherry</option>
              <option>Lemon</option>
            </optgroup>
            <optgroup label="vegetables">
              <option>Carrot</option>
              <option>Eggplant</option>
              <option>Potato</option>
            </optgroup>
          </select>
        </p>
        <p>
            <label for="multi">Select box allowing multiple selections:</label>
            <select multiple id="multi" name="multi">
            <option>Banana</option>
            <option>Cherry</option>
            <option>Lemon</option>
          </select>
        </p>
        <p>
            <label for="myFruit">What's your favorite fruit?</label>
            <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
            <datalist id="mySuggestion">
              <option>Apple</option>
              <option>Banana</option>
              <option>Blackberry</option>
              <option>Blueberry</option>
              <option>Lemon</option>
              <option>Lychee</option>
              <option>Peach</option>
              <option>Pear</option>
            </datalist>
        </p>
        <p>
            <label for="myFruit">What is your favorite fruit? (With fallback)</label>
            <input type="text" id="myFruit" name="fruit" list="fruitList">
            <datalist id="fruitList">   <label for="suggestion">or pick a fruit</label>
              <select id="suggestion" name="altFruit">
                <option>Apple</option>
                <option>Banana</option>
                <option>Blackberry</option>
                <option>Blueberry</option>
                <option>Lemon</option>
                <option>Lychee</option>
                <option>Peach</option>
                <option>Pear</option>
              </select>
            </datalist>
        </p>
        <p>
            <button type="submit">Submit me!</button>
        </p>
    </form>
</body>

</html>
